<template>
  <div class="admin-container">
    <!-- 数据列表 ---- 添加按钮 -->
    <div class="btn-container">
      <div class="left">
        <el-icon size="18">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <!-- 添加按钮 -->
      <!-- v-if 根据 权限列表来显示  如果用户没有这个权限  将不显示添加按钮 -->
      <el-button @click="addPrCate">添加</el-button>
    </div>
    <!-- 表格 -->
    <div class="table-container">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="分类名称" />
        <el-table-column prop="level" label="级别">
          <template #default="{ row }">
            {{ row.level === 0 ? "1级" : "2级" }}
          </template>
        </el-table-column>
        <el-table-column prop="productCount" label="商品数量" />
        <el-table-column prop="productUnit" label="数量单位" />
        <el-table-column label="导航栏">
          <template #default="{ row }">
            <el-switch
              v-model="row.navStatus"
              :active-value="1"
              :inactive-value="0"
              @click="SwitchStatus(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="是否显示">
          <template #default="{ row }">
            <el-switch
              v-model="row.showStatus"
              :active-value="1"
              :inactive-value="0"
              @click="SwitShowStatus(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="操作" width="250">
          <template #default="{ row }">
            <el-button @click="toParentId(row.id)" :disabled="row.level === 1"
              >查看下级</el-button
            >
            <el-button>转移商品</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button @click="toUpdatePro(row.id)">编辑</el-button>
            <el-button type="danger" @click="delTab(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div></div>
    <!-- 分页器 组件 -->
    <div class="pagination-box">
      <el-pagination
        v-model:current-page="paginationParams.currentPage"
        v-model:page-size="paginationParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationParams.total"
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
// import MultiSel from "@/hooks/components/useMultiSel";
import * as http from "@/request/http";
import { reactive, watch } from "vue";
import { Tickets } from "@element-plus/icons-vue";
import useTable from "@/hooks/components/useTable";

import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

// 跳转
const toParentId = (id: number) => {
  router.push({
    path: "productCate",
    query: {
      parentId: id,
    },
  });
};
// console.log("获取到的id", route.query.parentId);

const SelParams = reactive({
  id: 0,
});

// // 查询参数对象   keyword关键字
// const searchParams = reactive({
//   id: 0,
// });

// 调用useTable函数  实现table数据渲染 以及 分页器功能
const {
  tableData,
  paginationParams,
  handleCurrentChange,
  handleSizeChange,
  queryList,
} = useTable(http.productCate.proCateListChild, SelParams);

watch(
  () => route.query.parentId,
  () => {
    if (route.query.parentId) {
      SelParams.id = route.query.parentId as any;
      console.log(SelParams.id);
      queryList();
    } else {
      SelParams.id = 0;
      queryList();
    }
  },
  {
    immediate: true,
  }
);

// 点击删除
const delTab = (id: number) => {
  ElMessageBox.confirm("是否要删除??", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      http.productCate.productCatDelete(id).then((res) => {
        if (res.code === 200) {
          queryList();
          ElMessage.success(" 删除成功");
        }
      });
    })
    .catch(() => {});
};

// 点击添加
const addPrCate = () => {
  router.push("addProductCate");
};

// 修改导航栏状态
const SwitchStatus = (row: IProCateLiChiModel) => {
  console.log(row.id, row.navStatus);
  http.productCate
    .proUpdateNavSta(row.id, row.navStatus)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("更新成功");
      } else {
        ElMessage.error("更新失败");
        // 更新失败的话  需要将 状态 复原
        row.navStatus = row.navStatus == 1 ? 0 : 1;
      }
    })
    .catch((err) => {
      console.log("err : ", err);
      // 更新失败的话  需要将 状态 复原
      row.navStatus = row.navStatus == 1 ? 0 : 1;
    });
};
// productCategory/update/showStatus
// 修改显示状态
const SwitShowStatus = (row: IProCateLiChiModel) => {
  console.log(row.id, row.navStatus);
  http.productCate
    .proUpdateShowSta(row.id, row.showStatus)
    .then((res) => {
      if (res.code === 200) {
        ElMessage.success("更新成功");
      } else {
        ElMessage.error("更新失败");
        // 更新失败的话  需要将 状态 复原
        row.navStatus = row.navStatus == 1 ? 0 : 1;
      }
    })
    .catch((err) => {
      console.log("err : ", err);
      // 更新失败的话  需要将 状态 复原
      row.navStatus = row.navStatus == 1 ? 0 : 1;
    });
};

// 跳转到编辑的页面
const toUpdatePro = (id: number) => {
  router.push({
    path: "updateProductCate",
    query: {
      id,
    },
  });
};
</script>
<!-- 样式 -->
<style scoped lang="less">
.admin-container {
  background-color: #fff;

  // 搜索框
  .search-container {
    padding: 20px;
    box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;

    .top {
      display: flex;
      justify-content: space-between;

      .top-left {
        display: flex;
        align-items: center;

        span {
          margin-left: 15px;
        }
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      width: 100%;
      margin-left: 8%;
      .el-input {
        width: 300px;
      }
    }
  }

  // 添加按钮
  .btn-container {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    margin: 20px 0;
    box-shadow: 0 2px 12px 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;

    .left {
      display: flex;
      align-items: center;

      span {
        margin-left: 10px;
      }
    }
  }

  // 表格
  // .table-container {}

  // 分页器
  .pagination-box {
    display: flex;
    flex-direction: row-reverse;
    margin: 20px 0;
  }
}
</style>
